<template>
	<div class="myTags" v-show="!item.common.isHidden" :style="commonStyle">
		<block v-for="(tag,index) in tags" :key="index">
			<div class="tag" :style="styles" :class="{padding:item.common.autoWidth}">{{tag}}</div>
		</block>
	</div>
</template>

<script>
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myTags',
		props:{
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		data() {
			return {
				item: {
					common: {},
					style: {}
				},
			}
		},
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					return true
				}
			})
		},
		computed: {
			tags() {
				var text = this.item.common.text
				if (!text) {
					return []
				}
				var separator = this.item.common.separator
				if (separator) {
					return text.split(separator)
				} else {
					return [text]
				}
			},
			styles() {
				var config = this.item.common
				if (this.tags.length > 0) {
					return 'font-size:' + config.fontSize + 'rpx;' +
						'color:' + config.fontColor + ';' +
						'width:' + (!config.autoWidth ? config.tagWidth : null) + 'rpx;' +
						'height:' + config.tagHeight + 'rpx;' +
						'line-height:' + (uni.upx2px(config.tagHeight) - 2) + 'px;' +
						'border-color:' + config.borderColor + ';' +
						'background-color:' + config.bgColor + ';' +
						'margin-left:' + config.gap + 'rpx;' +
						'border-radius:' + (config.shape === 'circle' ? uni.upx2px(config.tagHeight) : 2) + 'px;'
				} else {
					return ''
				}
			},
			commonStyle(){
				return calcBaseStyle(this.item,this.pageConfig.contentH)
			},
		}
	}
</script>

<style lang="less" scoped>
	.myTags {
		position: absolute;
		overflow: hidden;
		display: flex;
		flex-wrap: nowrap;
		box-sizing: border-box;
		.tag{
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			border-width: 1px;
			border-style: solid;
			&:first-child{
				margin-left: 0!important;
			}
		}
		.padding{
			padding: 0px 5px;
		}
	}
</style>
